<template>
  <div class="massage">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="服务流程">
        <el-select v-model="region" placeholder="请选择服务流程">
          <el-option label="咨询与了解" value="咨询与了解"></el-option>
          <el-option label="方案与委托" value="方案与委托"></el-option>
          <el-option label="看房与尽调" value="看房与尽调"></el-option>
          <el-option label="缴纳保证金" value="缴纳保证金"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input placeholder="请输入手机号" v-model="input3" class="input-with-select">
          <el-button slot="append">
            <span class="obtain" v-if="show" @click="OnCode">获取验证码</span>
            <span v-else>{{ second }}s</span>
          </el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="input" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <p class="btn" @click="determine">确定</p>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      messageVisible: true,
      verifyCode: "",
      input3: "",
      input: "",
      region: "",
      show: true,
      timer: null,
      second: 60,
      form: {}
    };
  },
  methods: {
    OnCode() {
      this.show = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.input3
        })
        .then(res => {
          this.$message({
            message: res.data.msg
          });
          if (res.data.code == 0) {
            this.verifyCode = res.data.data;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.show = true;
            this.second = 60;
          }
        })
        .catch(function(error) {});
    },
    determine() {
      if (this.input3 != "" && this.input3.length == 11) {
        if (this.input == this.verifyCode && this.input != "") {
          this.instance
            .add({
              serviceFlow: this.region,
              phone: this.input3
            })
            .then(res => {
              this.$message({
                message: res.data.msg
              });
              if (res.data.code == "0") {
                this.$emit("OnMessage", false);
              }
            })
            .catch(function(error) {});
        } else {
          this.$message({
            message: "请正确输入验证码"
          });
        }
      } else {
        this.$message({
          message: "请输入正确的手机号"
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.massage {
  // .el-input-group {
  //   width: 367px;
  // }
  // .el-input {
  //   width: 367px;
  //   // height: 53px;
  // }
  .el-select {
    width: 100%;
  }
  .el-dialog .el-input__inner,
  .el-dialog .el-textarea__inner {
    height: 53px !important;
  }
  .btn {
    cursor: pointer;
    width: 80%;
    height: 54px;
    background: #ef704a;
    border-radius: 4px;
    margin-top: 23px;
    text-align: center;
    line-height: 54px;
    font-size: 16px;
    color: #fff;
  }
  .el-input-group__append {
    background: #fff;
  }
  .obtain {
    font-size: 14px;

    color: #f0704a;
  }
}
</style>
<style>
.dialog_ipt > .el-input > .el-input__inner {
  height: 53px;
}
.dialog_ipt > .el-input-group__append {
  height: 53px;
}
</style>
